   // 设置全局的baseURL
   axios.defaults.baseURL = 'https://developer.duyiedu.com/vue/bz';
   // 设置响应拦截器
   axios.interceptors.response.use(response => {
       const {
           status
       } = response;
       const {
           baseURL,
           url
       } = response.config;
       if (status === 200) {
           if (url === '/video') {
               // 如果是请求视频
               return {
                   count: response.data.count,
                   data: response.data.data
               }
           }
           return response.data.data
       }
       return response
   })
   var vm = new Vue({
       el: '#app',
       data: {
           navList: [], //渲染的导航菜单
           navHide: true, //初始隐藏扩展的导航
           navActiveIndex: 0, //初始导航菜单激活第一项
           bannerList: [], //轮播图长度
           bannerWidth: 378, //轮播宽度
           bannerStyle: {
               left: 0,
               transition: "left 0.3s"
           }, //轮播图样式开始时距离左边位置
           bannerActiveIndex: 0, //开始时是第一个li索引激活
           videoOldList: [], //视频列表
           videoGettingData: false, //滚动获取视频状态
           videoCount: 0, //视频总数
       },
       computed: {
           videoList() {
               return this.videoOldList.map(item => {
                   item.play = item.play > 10000 ? item.play / 10000 + '万' : item.play;
                   item.rank = item.rank > 10000 ? item.rank / 10000 + '万' : item.rank;
                   return item
               })
           }
       },
       created() {
           this.getData()
       },
       methods: {
           handleClick() {
               this.navHide = !this.navHide; //点击切换显示和隐藏
           },
           handleNavClick(index) {
               this.navActiveIndex = index; //点击哪个导航菜单就只给他添加激活类名
           },
           autoMove() {
               // 自动轮播一张
               setTimeout(() => {
                   if (this.bannerActiveIndex === 0) {
                       // 到第一张时重新加上过渡
                       this.bannerStyle.transition = 'left 0.3s';
                   }
                   this.bannerActiveIndex++; //轮播索引自动+1
                   // 靠改变轮播图容器ul的left位移而轮播切换
                   this.bannerStyle.left = -this.bannerWidth * this.bannerActiveIndex + 'px'
               }, 1500)
           },
           handleTransitionEnd() {
               if (this.bannerActiveIndex === this.bannerList.length - 1) {
                   // 设置成第一张初始的索引
                   this.bannerActiveIndex = 0;
                   // 设置成第一张初始时的left
                   this.bannerStyle.left = 0;
                   // 取消过渡
                   this.bannerStyle.transition = 'none';
               }
               this.autoMove(); //过渡结束再调用自动轮播一次
           },
           handleScroll(e) {
               const dom = e.target;
               const {
                   scrollHeight,
                   offsetHeight,
                   scrollTop
               } = dom;
               const videoLength = this.videoList.length;
               // 剩余可滚动高度
               const toBottomHeight = scrollHeight - offsetHeight - scrollTop;
               if (toBottomHeight < 200 && !this.videoGettingData) {
                   if (videoLength == this.videoCount) {
                       // 到达视频总数量不再发送请求
                       return
                   }
                   // 发送请求获取下一阶段视频
                   this.videoGettingData = true;
                   axios.get('/video', {
                       params: {
                           start: videoLength, //从数组的长度位置开始偏移获取
                           offset: 10
                       }
                   }).then(resp => {
                       // 展开添加到之前的数据里去
                       this.videoOldList.push(...resp.data)
                       this.videoGettingData = false
                   })
               }
           },
           initNavList(navRes) {
               this.navList = navRes;
           },
           initBannerList(bannerRes) {
               // 复制第一张添加到轮播列表最后成为最后一张
               const bannerLastEle = {
                   ...bannerRes[0] //直接赋值是对象引用一改都改，所以克隆
               };
               // 同时改变克隆过去的id免得收尾2张一样的id也一样
               bannerLastEle.id = Math.floor(Math.random() * 10000000);
               this.bannerList = [...bannerRes, bannerLastEle];
           },
           initVideoList(videoRes) {
               this.videoOldList = videoRes.data
               this.videoCount = videoRes.count;
           },
           getData() {
               axios.all([
                   axios.get('/nav'),
                   axios.get('/banner'),
                   axios.get('/video', {
                       params: {
                           start: 0,
                           offset: 10
                       }
                   })
               ]).then(axios.spread((navRes, bannerRes, videoRes) => {
                   this.initNavList(navRes);
                   this.initBannerList(bannerRes)
                   this.initVideoList(videoRes)
               }))
           }
       },
       mounted() {
           // 实例被挂载后调用
           this.autoMove();
       }
   });